<template>
  <div id="login">
    <div class="warring">
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user" style="marginTop: 40px">
          <Input
            type="text"
            v-model="formInline.user_name"
            placeholder="请输入您的用户名"
            label-width="100%"
            style="width: 80%"
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            v-model="formInline.user_pwd"
            placeholder="请输入您的密码"
            style="width: 80%"
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button
            style="width: 80%"
            type="primary"
            @click="handleSubmit('formInline')"
            >登录</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import {userLogin,getUserlInfo} from '../api/login'
import Cookies from 'js-cookie'
import AuthList from '../router/authList'
import Router from '../router/index'
export default {
  data() {
    return {
      formInline: {
        user_name: "",
        user_pwd: "",
      },
      ruleInline: {
        user_name: [{ required: true, message: "用户名不可为空", trigger: "blur" }],
        user_pwd: [
          { required: true, message: "密码不可为空", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
            userLogin(this.formInline).then(res=>{
                Cookies.set('token',res.token)
                getUserlInfo().then(res=>{
                    console.log(res)
                    Router.addRoutes(AuthList)
                    Router.push('/addQuestions')
                })
                this.$Message.success(res.msg);
            })
        } else {
          this.$Message.error("账号或密码错误");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100%;
  background: #000080;
  position: relative;
}
.warring {
  width: 400px;
  height: 250px;
  background: #fff;
  position: absolute;
  left: 70%;
  top: 30%;
  padding-left: 3%;
}
</style>